import React, { } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.less'
import SwiperCore, { Autoplay } from 'swiper'
import styled from 'styled-components'
import { useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'

SwiperCore.use([Autoplay])

const HomeNoticeStyle = styled.div`
  .notice-container{
    height: 1.2rem;
    background-color: white;
    border-radius: .13rem;
    margin-top: .16rem;
    color: #474747;
    .content{
      height: 100%;
      margin: 0 .32rem;
      justify-content: flex-start;
      .left{
        span{
          font-weight: 800;
          margin-right: .16rem;
        }
        img{
          width: .95rem;
          height: .53rem;
        }
      }
      .center{
        width: 1px;
        height: 50%;
        background-color: #474747;
        border-radius: .15rem;
        margin:0 .4rem;
        opacity: .2; 

      }
      .right{
          .swiper-container{
            height: 1.2rem;
            .swiper-slide{
              .item{
                opacity: .5;
                font-Size: .29rem;
                height: 1.2rem;
                line-Height: 1.2rem;
              }
            }
          }
      }

    }
  }


`


const HomeNotice = (props) => {

  const history =  useHistory()
  const isApplet = useSelector(state => state.isApplet)

  return (

    <HomeNoticeStyle>
      <div className="notice-container">
        <div className="content flex-row">
          <div className="left flex-row">
            <span> 公告</span>
            <img src="https://res.lexiangpingou.cn/images/826/2020/10/TUuhlT2zE3BeTjm1AONCOT8a3vLmM2.png" alt="" />
          </div>

          <div className="center">
          </div>

          <div className="right">
            <Swiper
              tag='section'
              wrapperTag="ul"
              direction='vertical'
              slidesPerView={'auto'}
              autoplay={{
                delay: 3000,
                disableOnInteraction: false
              }}
              loop={ true }
            >
              {
                props?.notices?.map((item, key) => {
                  return (
                    <SwiperSlide tag="li" key={item.createtime + key}>
                      <div className="item" onClick={ e => {  isApplet ? window.navigateToWebWiew('/notices/'+ item.id) : history.push('/notices/' + item.id)  }}>
                        {item.title}
                      </div>
                    </SwiperSlide>
                  )
                })
              }

            </Swiper>
          </div>
        </div>
      </div>
    </HomeNoticeStyle>
  )
}

export default HomeNotice





